<template>
  <div class="demo">
    <div class="circle-box"></div>
    <div class="bar-box"></div>
    <div class="plot-box"></div>
    <div class="xy-box"></div>
    <div class="xya-box"></div>
    <update v-if="false"/>
    <svgLine v-if="false"/>
    <svgArea v-if="false"/>
    <svgPie v-if="false"/>
    <!-- id="histogram" :onRectClick="testHistogram" -->
    <histogram></histogram>
    <!-- <svg width="960" height="960"></svg> -->
  </div>
</template>
 
<script>
// https://blog.csdn.net/Peter_Luoz/article/details/89213575
// https://github.com/d3/d3/wiki/Gallery
import * as d3 from "d3";
import update from './update.vue'
import svgLine from './line.vue'
import svgArea from './area.vue'
import svgPie from './pie.vue'
import histogram from './histogram.vue'
export default {
  name: "vueName",
  components: { update, svgLine, svgArea, svgPie, histogram },
  data() {
    return {
      msg: ""
    };
  },
  mounted() {
    // console.log(d3)
    this.drawCircle();
    this.drawBar();
    this.drawPlot();
    this.drawXY();
    this.drawXYA()
  },
  methods: {
    drawCircle() {
      //Width and height
      var w = 500;
      var h = 50;

      //Data
      var dataset = [5, 10, 15, 20, 25];

      //Create SVG element
      var svg = d3
        .select(".circle-box")
        .append("svg")
        .attr("width", 500)
        .attr("height", 50);

      var circles = svg
        .selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle");

      circles
        .attr("cx", function(d, i) {
          return i * 50 + 25;
        })
        .attr("cy", h / 2)
        .attr("r", function(d) {
          return d;
        });
    },
    drawBar() {
      //Width and height
      var w = 500;
      var h = 200;
      var padding = 30;
      var dataset = [];
      //Initialize empty array
      for (let i = 0; i < 15; i++) {
        var newNumber = Math.random() * 20; //New random number (0-30)
        dataset.push(newNumber); //Add new number to array
      }

      var xScale = d3
        .scaleLinear()
        .domain([
          0,
          d3.max(dataset.length)
        ])
        .range([padding, w - padding * 2]);

      var yScale = d3
        .scaleLinear()
        .domain([
          0,
          d3.max(dataset, function(d) {
            return d
          })
        ])
        .range([h - padding, padding]);

      var xAxis = d3
        .axisBottom()
        .scale(xScale)
        .ticks(5);

      var yAxis = d3
        .axisLeft()
        .scale(yScale)
        .ticks(5);

      //Create SVG element
      var svg = d3
        .select(".bar-box")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

      var bar = svg
        .selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("height", 50)
        .attr("width", 20)
        .attr("fill", "gray");
      bar
        .attr("x", function(d, i) {
          return i * (w / dataset.length);
        })
        .attr("y", function(d) {
          return h - d * 10;
        })
        .attr("width", function(d) {
          return w / dataset.length - 2;
        })
        .attr("height", function(d) {
          return d * 10;
        });

      //加标签
      svg
        .selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
          return d.toFixed(2);
        })
        .attr("x", function(d, i) {
          return i * (w / dataset.length) + 2;
        })
        .attr("y", function(d) {
          return h - d * 10 + 10;
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "blue");
      
      // svg
      //   .append("g")
      //   .attr("class", "axis")
      //   .attr("transform", "translate(0," + (h - padding) + ")")
      //   .call(xAxis);
      // // call is not defined

      // svg
      //   .append("g")
      //   .attr("class", "axis")
      //   .attr("transform", "translate(" + padding + ",0)")
      //   .call(yAxis);
    },
    drawPlot() {
      var w = 500;
      var h = 100;
      var dataset_2 = [
        [5, 20],
        [480, 90],
        [250, 50],
        [100, 33],
        [330, 95],
        [410, 12],
        [475, 44],
        [25, 67],
        [85, 21],
        [220, 88]
      ];
      var plot = d3
        .selectAll(".plot-box")
        .append("svg")
        .attr("height", h)
        .attr("width", w);

      plot
        .selectAll("circle")
        .data(dataset_2)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          return d[0];
        })
        .attr("cy", function(d) {
          return d[1];
        })
        .attr("r", function(d) {
          return Math.sqrt(h - d[1]);
        });

      plot
        .selectAll("text")
        .data(dataset_2)
        .enter()
        .append("text")
        .text(function(d) {
          return d[0] + "," + d[1];
        })
        .attr("x", function(d) {
          return d[0] + 3;
        })
        .attr("y", function(d) {
          return d[1] + 3;
        })
        .attr("font_size", "2px");
    },
    drawXY() {
      //Width and height
      var w = 500;
      var h = 300;
      var padding = 30;
      var dataset = [
        [5, 20],
        [480, 90],
        [250, 50],
        [100, 33],
        [330, 95],
        [410, 12],
        [475, 44],
        [25, 67],
        [85, 21],
        [220, 88],
        [600, 150]
      ];
      
      //Create scale functions
      var xScale = d3
        .scaleLinear()
        .domain([
          0,
          d3.max(dataset, function(d) {
            return d[0];
          })
        ])
        .range([padding, w - padding * 2]);

      var yScale = d3
        .scaleLinear()
        .domain([
          0,
          d3.max(dataset, function(d) {
            return d[1];
          })
        ])
        .range([h - padding, padding]);

      var rScale = d3
        .scaleLinear()
        .domain([
          0,
          d3.max(dataset, function(d) {
            return d[1];
          })
        ])
        .range([2, 5]); //Define X axis

      var xAxis = d3
        .axisBottom()
        .scale(xScale)
        .ticks(5);

      var yAxis = d3
        .axisLeft()
        .scale(yScale)
        .ticks(5);

      //Create SVG element
      var svg = d3
        .select(".xy-box")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

      //Create circles
      svg
        .selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          return xScale(d[0]);
        })
        .attr("cy", function(d) {
          return yScale(d[1]);
        })
        .attr("r", function(d) {
          return rScale(d[1]);
        });

      //Create labels
      svg
        .selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function(d) {
          return d[0] + "," + d[1];
        })
        .attr("x", function(d) {
          return xScale(d[0]);
        })
        .attr("y", function(d) {
          return yScale(d[1]);
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "red");
      //Create X axis
      svg
        .append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);
      // call is not defined

      svg
        .append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);
    },
    drawXYA() {
      let data= [80, 100, 56, 120, 180, 30, 40, 120, 160];
      let svgWidth = 500, svgHeight = 300;

      let svg = d3.select('.xya-box').append('svg')
          .attr("width", svgWidth)
          .attr("height", svgHeight);

      // 首先是拿最大值构建x轴坐标
      let xScale = d3.scaleLinear()
          .domain([0, d3.max(data)])
          .range([0, svgWidth]);

      // 接下来是反转值，用作y轴坐标。
      let yScale = d3.scaleLinear()
          .domain([0, d3.max(data)])
          .range([svgHeight, 0]);

      // 横轴的API使用
      let x_axis = d3.axisBottom()
          .scale(xScale);

      // 纵轴的API使用
      let y_axis = d3.axisLeft()
          .scale(yScale);

      // 在svg中提供了如g元素这样的将多个元素组织在一起的元素。
      // 由g元素编组在一起的可以设置相同的颜色，可以进行坐标变换等，类似于Vue中的 <template>

      svg.append("g")
          .attr("transform", "translate(50, 10)")
          .call(y_axis);

      let xAxisTranslate = svgHeight - 20;

      svg.append("g")
          .attr("transform", "translate(50, " + xAxisTranslate  +")")
          .call(x_axis);
    },
    testHistogram(d, i) {
      this.$alert(d, i, {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${ action }`
          });
        }
      });
    }
  }
};
</script>
 
<style scoped lang="scss">
</style>